<style lang="less">
  .message-template-add {
    .el-select{
      width: 100%;
    }
    .el-button-group {
      .el-button {
        margin-bottom: 5px;
        margin-right:  5px;
      }
    }
  }
</style>
<template>
  <el-dialog title="新增消息模板" :visible.sync="dialogVisible" width="540px" class="message-template-add">
    <el-form label-width="80px" ref="form" :model="form">
      <el-form-item label="场景类型"  prop="scene"
                    :rules="[{ required: true, message: '请选择场景类型', trigger: 'change',type: 'number' }]">
        <el-select v-model="form.scene" placeholder="请选择场景类型" :disabled="form.content !== null && form.content.indexOf('{') > -1">
          <el-option
            v-for="item in $store.getters.MESSAGE_TEMPLATE_SCENE"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务节点" prop="node"
                    :rules="[{ required: true, message: '请选择业务节点', trigger: 'change',type: 'number' }]">
        <el-select v-model="form.node" placeholder="请选择业务节点" :disabled="form.content !== null && form.content.indexOf('{') > -1">
          <el-option
            v-for="item in $store.getters.MESSAGE_TEMPLATE_NODE"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推送渠道" prop="channel"
                    :rules="[{ required: true, message: '请选择推送渠道', trigger: 'change',type: 'array' }]">
        <el-select multiple v-model="form.channel" placeholder="请选择推送渠道">
          <el-option
            v-for="item in $store.getters.MESSAGE_TEMPLATE_CHANNEL"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息形式" prop="form"
                    :rules="[{ required: true, message: '请选择消息形式', trigger: 'change',type: 'array' }]">
        <el-select multiple v-model="form.form" placeholder="请选择消息形式">
          <el-option
            v-for="item in $store.getters.MESSAGE_TEMPLATE_FORM"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接收对象" prop="target"
                    :rules="[{ required: true, message: '请选择接收对象', trigger: 'change',type: 'array' }]">
        <el-select multiple v-model="form.target" placeholder="请选择接收对象">
          <el-option
            v-for="item in $store.getters.MESSAGE_TEMPLATE_TARGET"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板类型">
        <el-radio-group v-model="form.type">
          <el-radio label="FIXED">固定模板</el-radio>
          <el-radio label="TEMPORARY">临时模板</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="有效日期" v-if="form.type =='TEMPORARY'" prop="datetimerange"
                    :rules="[{ required: true, message: '请选择有效日期', trigger: 'change', type: 'array' }]">
        <el-date-picker
          v-model="form.datetimerange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="模板标题" prop="title"
                    :rules="[{ required: true, message: '请输入模板标题', trigger: 'blur' }]">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="模板内容" prop="content"
                    :rules="[{ required: true, message: '请输入模板内容', trigger: 'blur' }]">
        <div style="color:orange">请在以下参数中选择所需字段插入文本框进行内容编辑</div>
        <el-button-group>
          <el-button @click="editContent(item)" v-for="item in params"  :key="item.id">{{item.name}}</el-button>
        </el-button-group>
        <el-input type="textarea" v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="float: right" @click.native="previewContent" >预览</el-button>
      </el-form-item>
      <el-form-item>
        <el-input  type="textarea" disabled v-model="previewContentMessage" v-if="previewBtn === 1"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="createform" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getAllMessageTemplateParams} from '../../api/v3/MessageTemplateParam';
export default {
  name: 'message-template-add',
  componentName: 'message-template-add',
  data () {
    return {
      dialogVisible: false,
      loading: false,
      params: [],
      form: {
        id: null,
        type: 'FIXED',
        scene: null,
        node: null,
        channel: [],
        form: [],
        target: [],
        datetimerange: [],
        title: null,
        content: null,
        effectiveStartTime: null,
        effectiveEndTime: null
      },
      previewContentMessage: '',
      previewBtn: 0
    };
  },
  methods: {
    editContent (param) {
      this.form.content += '{' + param.key + '}';
    },
    reset () {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.$ue.resetObjNull(this.form);
      this.form.type = 'FIXED';
      this.form.content = '';
    },
    show (o) {
      this.reset();
      if (o) {
        this.form.id = o.id;
        this.form.scene = o.scene;
        this.form.type = o.type;
        this.form.node = o.node;
        this.form.title = o.title;
        this.form.content = o.content;
        this.form.effectiveStartTime = o.effectiveStartTime;
        this.form.effectiveEndTime = o.effectiveEndTime;
        this.form.channel = o.channel.split(',').map(i => parseInt(i));
        this.form.form = o.form.split(',').map(i => parseInt(i));
        this.form.target = o.target.split(',').map(i => parseInt(i));
        if (o.effectiveStartTime != null) {
          this.form.datetimerange = [new Date(o.effectiveStartTime), new Date(o.effectiveEndTime)];
        }
      } else {
        this.params = [];
      }
      this.dialogVisible = true;
      this.loading = false;
      this.previewBtn = 0;
    },
    hide () {
      this.loading = false;
      this.dialogVisible = false;
    },
    loadParam (scene, node) {
      getAllMessageTemplateParams({
        filters: 'EQ_scene=' + scene + ';EQ_node=' + node,
        size: 10000
      }).then(res => {
        this.params = res.data;
      });
    },
    createform () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let o = Object.assign({}, this.form);
          o.channel = o.channel.join(',');
          o.form = o.form.join(',');
          o.target = o.target.join(',');
          if (o.datetimerange && o.datetimerange.length && o.datetimerange[0] != null) {
            o.effectiveStartTime = o.datetimerange[0].toJSON();
            o.effectiveEndTime = o.datetimerange[1].toJSON();
          }
          this.loading = true;
          this.$emit('comfirmSuccess', o);
        }
      });
    },
    previewContent () {
      this.previewBtn = 1;
      let content = '';
      for (let p in this.params) {
        if (this.form.content.indexOf(this.params[p].key) > 0) {
          content = this.form.content.replace('{' + this.params[p].key + '}', this.params[p].demo);
        }
      }
      this.previewContentMessage = content === '' ? this.form.content : content;
    }
  },
  watch: {
    'form.scene': {
      handler: function (val, oldVal) {
        if (this.form.node != null) {
          this.loadParam(val, this.form.node);
        }
      },
      deep: true
    },
    'form.node': {
      handler: function (val, oldVal) {
        if (this.form.scene != null) {
          this.loadParam(this.form.scene, val);
        }
      },
      deep: true
    }
  },
  mounted () {
    this.$store.commit('initDict');
  }
};
</script>
